<!-- 店铺信息 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="店铺列表" name="one">
        <SearchTable
          :storageList="storageList"
          :rentSalesmanList="rentSalesmanList"
          :whetherStatue="whetherStatue"
          :contractReviewStatus="contractReviewStatus"
          :shopLevelList="shopLevelList"
          :onlinePromotionList="onlinePromotionList"
          :settleInInterestPointsList="settleInInterestPointsList"
          :customerAcquisitionChannelList="customerAcquisitionChannelList"
          :materialsList="materialsList"
          :customerActionList="customerActionList"
          :provinceList="provinceList"
          ref="searchTableRef"
          @handleViewEdit="handleViewEdit"
          @handleFollowVisitRecord="handleFollowVisitRecord" />
      </el-tab-pane>
      <el-tab-pane label="店铺详情" name="two">
        <FormTab
          :id="selectId"
          :storageList="storageList"
          :rentSalesmanList="rentSalesmanList"
          :whetherStatue="whetherStatue"
          :platFormStatus="platFormStatus"
          :supportAllMobileList="supportAllMobileList"
          :shopLevelList="shopLevelList"
          :onlinePromotionList="onlinePromotionList"
          :mainBusinessList="mainBusinessList"
          :formOfEntryList="formOfEntryList"
          :settleInInterestPointsList="settleInInterestPointsList"
          :customerAcquisitionChannelList="customerAcquisitionChannelList"
          :materialsList="materialsList"
          :customerActionList="customerActionList"
          :provinceList="provinceList"
          v-model:formStatus="formStatus"
          @handleInitData="clearData"
          @handleSuccess="handleSuccess" />
      </el-tab-pane>
      <el-tab-pane label="商务回访详情" name="three">
        <FollowRemarkTab
          :id="selectFollowRemarkId"
          :storageList="storageList"
          :whetherStatue="whetherStatue"
          :shopLevelList="shopLevelList"
          :onlinePromotionList="onlinePromotionList"
          :mainBusinessList="mainBusinessList"
          :formOfEntryList="formOfEntryList"
          :settleInInterestPointsList="settleInInterestPointsList"
          :customerAcquisitionChannelList="customerAcquisitionChannelList"
          :materialsList="materialsList"
          :customerActionList="customerActionList"
          :provinceList="provinceList"
          @handleInitData="clearData"
          @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="storeInfo">
import SearchTable from "@/components/user/storeManager/storeInfo/SearchTable.vue";
import FormTab from "@/components/user/storeManager/storeInfo/FormTab.vue";
import FollowRemarkTab from "@/components/user/storeManager/storeInfo/FollowRemarkTab.vue";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
import type { TabsPaneContext } from "element-plus";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";

import { getRentStaffInfo } from "@/utils/api/rentStaff";
import type { IRentStaff } from "@/types/staff/rentStaff";
import type { IStaff } from "@/types/staff/staff";
import { getStaffInfo } from "@/utils/api/staff";
import type { IRegion, ISearchRegion } from "@/types/redPacketMallManage/region";
import { getRegionInfo } from "@/utils/api/region";

let { getDictData } = useDictData();
/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const selectId = ref(0);
const selectFollowRemarkId = ref(0);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");

/* 配件业务员 */
const storageList = ref<Array<IStaff>>([]);
/* 租机业务员 */
const rentSalesmanList = ref<Array<IRentStaff>>([]);
/* 是否信息 */
const whetherStatue = ref<Array<IDictData>>([]);
/* 合同状态 */
const contractReviewStatus = ref<Array<IDictData>>([]);
/* 平台信息 */
const platFormStatus = ref<Array<IDictData>>([]);
/* 支持到店自提手机类型信息 */
const supportAllMobileList = ref<Array<IDictData>>([]);
/* 店铺等级 */
const shopLevelList = ref<Array<IDictData>>([]);
/* 线上推广 */
const onlinePromotionList = ref<Array<IDictData>>([]);
/* 主营业务 */
const mainBusinessList = ref<Array<IDictData>>([]);
const formOfEntryList = ref<Array<IDictData>>([]);
/* 入驻兴趣点 */
const settleInInterestPointsList = ref<Array<IDictData>>([]);
/* 获客渠道 */
const customerAcquisitionChannelList = ref<Array<IDictData>>([]);
/* 物料 */
const materialsList = ref<Array<IDictData>>([]);
/* 客户动作 */
const customerActionList = ref<Array<IDictData>>([]);
/* 省 */
const provinceList = ref<Array<IRegion>>([]);

/* 获取配件业务员 */
function handleGetStaffInfo() {
  getStaffInfo<Array<IStaff>, unknown>()
    .then(res => {
      storageList.value = res.result;
    })
    .finally(() => {});
}

/* 获取租机业务员 */
function handleGetRentStaffInfo() {
  getRentStaffInfo<Array<IRentStaff>, unknown>()
    .then(res => {
      rentSalesmanList.value = res.result;
    })
    .finally(() => {});
}

/* 获取省 地址信息 */
function handleGetRegionInfo(parent_id: number) {
  getRegionInfo<IRegion, ISearchRegion>({ parent_id })
    .then(res => {
      provinceList.value = ([] as IRegion[]).concat(res.result);
    })
    .catch(() => {});
}

/* 处理查看编辑 */
function handleViewEdit(id: number, code: ViewModeFilter) {
  selectId.value = id;
  formStatus.value = code;
  activeName.value = "two";
}
/* 处理查看编辑 */
function handleFollowVisitRecord(id: number) {
  selectFollowRemarkId.value = id;
  activeName.value = "three";
}

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  selectId.value = 0;
  selectFollowRemarkId.value = 0;
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

getDictData("WHETHER", whetherStatue);
getDictData("CONTRACT_REVIEW_STATUS", contractReviewStatus);
getDictData("PLATFORM_TYPE", platFormStatus);
getDictData("SUPPORT_MOBILE_TYPE", supportAllMobileList);
getDictData("SHOP_LEVEL", shopLevelList);

getDictData("ONLINE_PROMOTION", onlinePromotionList);
getDictData("MAIN_BUSINESS", mainBusinessList);
getDictData("FORM_OF_ENTRY", formOfEntryList);
getDictData("SETTLE_IN_INTEREST_POINTS", settleInInterestPointsList);
getDictData("CUSTOMER_ACQUISITION_CHANNEL", customerAcquisitionChannelList);
getDictData("MATERIALS", materialsList);
getDictData("CUSTOMER_ACTION", customerActionList);

handleGetStaffInfo();
handleGetRentStaffInfo();

handleGetRegionInfo(0);
</script>

<style scoped></style>
